<template>
  <div class="login">
    <div class="title">
      登录
      <div class="tips">请输入你的手机号和密码</div>
    </div>
    <div class="from">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm gap-3 flex flex-col"
        label-position="top"
      >
        <el-form-item label="账号" prop="phone">
          <el-input v-model="ruleForm.phone" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="background: #171717; border: #171717; width: 100%; padding: 8px 16px"
            @click="submitForm(ruleFormRef)"
          >
            登录
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="
              background: #fff;
              width: 100%;
              padding: 8px 16px;
              color: black;
              border: 1px solid #dcdfe6;
            "
            @click="submitForm(ruleFormRef)"
          >
            使用验证码登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <span>没有账号？去 </span>
      <a @click="sendFlag"> 注册 </a>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const emits = defineEmits(['switchRegister'])
const flag = ref(false)
const sendFlag = () => {
  emits('switchRegister', flag.value)
}
const ruleFormRef = ref<FormInstance>()

const validatePhone = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入手机号！'))
  } else {
    callback()
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码！'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  phone: '',
  password: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}
</script>
<style scoped lang="scss">
.login {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .title {
    font-size: 24px;
    font-weight: bold;
    .tips {
      font-size: 14px;
      color: #71717a;
      font-weight: lighter;
      margin-top: 6px;
    }
  }
  .from {
    margin-top: 10px;
  }
  .footer {
    font-size: 14px;
    color: #09090b;
    text-align: center;
    a {
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
:deep(.el-form-item__label) {
  color: black;
  font-size: 14px;
}
</style>
